<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        //第三种
        function  checkName(){
            let paramObj = new URLSearchParams();
            paramObj.append("name",$("userName").value);

            axios.post("/test/checkName",paramObj)
                .then(e=> {
                    pressName(e.data);
                });
        }

        // 第二种
            // function  checkName(){
            //     var obj = {
            //         name:$("userName").value
            //     }
            //     //向服务器发送get请求，第一个参数为访问服务器的url地址
            //     //第二个参数为表单数据
            //         axios.get("/test/checkName",{params:obj}).then(e =>{pressName(e.data)});//e.data表示得到响应信息的消息体
            // }
            function pressName(info){
                if(info =="yes"){
                    $("infoDiv").innerHTML = "可以使用";
                    $("infoDiv").style.color = "green";
                }else {
                    $("infoDiv").innerHTML = "该用户已存在";
                    $("infoDiv").style.color = "red";
                }
            }
            function $(id){
                    return document.getElementById(id);
            }
            // 第一种
        //     //向服务器发送get请求，第一个参数为访问服务器的url地址
        //     //第二个参数为表单数据
        //     axios.get("/test/checkName",{
        //        params:{
        //             name:$("userName").value
        //         }
        //     }).then(e =>{
        //         if (e.data == "yes"){ //e.data表示得到相应信息的消息体
        //             $("infoDiv").innerHTML="可以使用";
        //             $("infoDiv").style.color="blue"
        //         }else {
        //             $("infoDiv").innerHTML="该用户已存在";
        //             $("infoDiv").style.color="red"
        //         }
        //     })
        // }
        // function $(id){
        //     return document.getElementById(id);
        // }
    </script>
</head>
<body>
    <form action="add">
        用户名：<input type="text" id="userName" name="userName" onblur="checkName()"><br>
        <div id="infoDiv">

        </div>
        生  日：<input type="text" id="birthday" name="birthday"><br>
        <input type="submit" value="添加">
    </form>
</body>
</html>